import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
import { IncidentService } from 'app/pages/traffic-management/incident-record/incident.service';
import { SELECT_OPTIONS } from 'app/app.constants';
import { PublicService } from 'app/public/public.service';
import * as moment from 'moment';
import { BullySubjectService, Bully } from 'app/shared/service';
import { differenceInCalendarDays } from 'date-fns';

@Component({
    selector: 'itmp-ir-history-list',
    templateUrl: './ir-history-list.component.html',
    styleUrls: ['./ir-history-list.component.css']
})
export class IrHistoryListComponent implements OnInit, OnChanges {
    @Input() zoneList;
    pagination = {
        totalEle: 0,
        pageSize: 10,
        currentPage: 1,
        currentSize: 0
    };
    listOfData = [];
    statusList: any;
    typeList: any;
    // lane_blockages = ['arrow-up.png', 'cross.png'];
    laneBlockageObj = { '1': 'arrow-up.png', '3': 'cross.png' };
    sourceList: any;
    renderHeader: any = null;
    sourceSelectList: any = null;
    statusSelectList: any = null;
    toolbarList = [
        // { className: 'icon-CCTV' },
        { className: 'icon-dingwei' },
        { className: 'icon-dayinfuyin-' },
        { className: 'icon-xiazai' }
    ];
    irType = [];
    irTypeSelect = null;
    dateRange = [];
    endDateRange = [];
    clearDateRange = [];
    queryStartTime = null;
    queryEndTime = null;
    endQueryStartTime = null;
    endQueryEndTime = null;
    queryClearStartTime = null;
    queryClearEndTime = null;
    queryData = null;
    editingItem = null;
    selectedItem = null;
    showTable = false;

    constructor(private incidentService: IncidentService, private pub: PublicService, private bully: BullySubjectService) {}

    getSelectionList() {
        const { res1, res2, res3 } = {
            res1: this.pub.getSelectOptionsList(SELECT_OPTIONS.INCIDENT_TYPE),
            res2: this.pub.getSelectOptionsList(SELECT_OPTIONS.INCIDENT_SOURCE, true),
            res3: this.pub.getSelectOptionsList(SELECT_OPTIONS.INCIDENT_STATUS, true)
        };
        this.irType = res1.data;
        this.typeList = res1.object;
        this.showTable = true;
        this.sourceSelectList = res2.data;
        this.sourceList = res2.object;
        this.statusSelectList = res3.data;
        this.statusList = res3.object;
        this.getHeader();
        this.showTable = true;
    }

    ngOnChanges(changes: SimpleChanges) {}

    ngOnInit() {
        this.getHeader();
        this.getSelectionList();
        // this.listOfData = this.incidentService.generateEvents(10);
        this.getAllList();
        this.bully.zoneListBehavior.subscribe(res => {
            this.zoneList = res['selectZoneList'];
            this.getAllList();
        });
    }

    getHeader() {
        this.renderHeader = this.incidentService.hisRenderHeader(this.sourceSelectList, this.statusSelectList);
    }

    getAllList() {
        // const pageParam = {
        //     pageNo: this.pagination.currentPage,
        //     pageSize: this.pagination.pageSize
        // };
        // this.queryData = this.incidentService.formIncidentRecordListData(
        //     this.renderHeader,
        //     this.dateRange,
        //     this.clearDateRange,
        //     this.irTypeSelect,
        //     pageParam
        // );
        this.queryData = {
            condition: {
                e_Time: {
                    endTime: this.queryClearEndTime,
                    startTime: this.queryClearStartTime
                },
                end_Time: {
                    endTime: this.endQueryEndTime,
                    startTime: this.endQueryStartTime
                },
                ir_id: this.renderHeader[0]['key'],
                ir_type: this.irTypeSelect,
                road_Name: this.renderHeader[6]['key'],
                source: this.renderHeader[8]['key'],
                start_Time: {
                    endTime: this.queryEndTime,
                    startTime: this.queryStartTime
                },
                veri_State: this.renderHeader[9]['key'],
                zone_ID: this.renderHeader[5]['key'],
                zoneIdList: this.zoneList
            },
            pageNum: this.pagination.currentPage,
            pageSize: this.pagination.pageSize
        };
        const query = this.incidentService.getIncidentRecordHistoryList(this.queryData);
        query.subscribe(
            (res: any) => {
                this.listOfData = res.data.content;
                this.pagination.totalEle = res.data.totolElements;
                this.pagination.currentSize = res.data.numberOfElements;
                this.listOfData.forEach(element => {
                    const strSplit = element.lane_Blockage.split('');
                    element.laneBlockage = strSplit;
                });
            },
            (error: any) => {}
        );
    }

    // page change
    onPageChange(e) {
        this.pagination.currentPage = e;
        this.getAllList();
    }

    onSizeChange(e) {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = e;
        this.getAllList();
    }

    refresh() {
        this.getHeader();
        this.irTypeSelect = null;
        this.dateRange = [];
        this.endDateRange = [];
        this.clearDateRange = [];
        this.queryStartTime = null;
        this.queryEndTime = null;
        this.endQueryStartTime = null;
        this.endQueryEndTime = null;
        this.queryClearStartTime = null;
        this.queryClearEndTime = null;
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getAllList();
    }

    filterSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.getAllList();
    }

    public irTypeSearch() {
        this.pagination.currentPage = 1;
        this.pagination.pageSize = 10;
        this.filterSearch();
        this.getAllList();
    }

    onChange(result: Date): void {
        this.queryStartTime = new Date(moment(result[0]).format('YYYY-MM-DD 00:00:00')).getTime();
        this.queryEndTime = new Date(moment(result[1]).format('YYYY-MM-DD 23:59:59')).getTime();
        if (this.dateRange.length === 0) {
            this.queryStartTime = null;
            this.queryEndTime = null;
        }
        this.getAllList();
    }

    endDateOnChange(result: Date): void {
        this.endQueryStartTime = new Date(moment(result[0]).format('YYYY-MM-DD 00:00:00')).getTime();
        this.endQueryEndTime = new Date(moment(result[1]).format('YYYY-MM-DD 23:59:59')).getTime();
        if (this.endDateRange.length === 0) {
            this.endQueryStartTime = null;
            this.endQueryEndTime = null;
        }
        this.getAllList();
    }

    clearTimeOnChange(result: Date): void {
        this.queryClearStartTime = new Date(moment(result[0]).format('YYYY-MM-DD 00:00:00')).getTime();
        this.queryClearEndTime = new Date(moment(result[1]).format('YYYY-MM-DD 23:59:59')).getTime();
        if (this.clearDateRange.length === 0) {
            this.queryClearStartTime = null;
            this.queryClearEndTime = null;
        }
        this.getAllList();
    }

    showDetail(item): void {
        this.editingItem = item.ir_ID;
        // this.isIrSelected.emit(item);
        this.selectedItem = item;
    }

    disabledDate = (current: Date): boolean => {
        // Can not select days before today and today
        return differenceInCalendarDays(current, new Date()) > 0;
    };
}
